<template>
    <main-wrap>
        <template v-slot:header>
            <Header title="用户使用协议"/>
        </template>
        <div class="dtWrap">
            <div class="xy_main">
                <template v-for="dt in agData" :key="dt.articleId">
                    <div class="title">《{{dt.tiitle}}》</div>
                    <div class="content" v-html="dt.content"></div>
                </template>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Header from '@/components/header.vue'
export default {
    components:{
        mainWrap,
        Header
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            id:'',
            agData:[]
        })

        onMounted( async()=>{
            state.id = route.params.id
            const res = await store.dispatch('arApi/get_article_list',{
                type:'agreement',
                page:1,
                limit:50
            })
            res.success && (state.agData = res.data)
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .xy_main{
        padding: 30px 40px ;
        .title{
            font-size: 34px;
            padding: 0;
            margin: 0;
            color: var(--baseColor);
            padding: 20px 0;
            font-weight: bold;
        }
        .content{
            font-size: 28px;
            line-height: 46px;  
            padding: 0 0 50px 0;
         }
    }
    

</style>